<template>
  <div>
    <gm-nav></gm-nav>
    <div class="main-container">
      <div class="search-box">
        <div class="search">
          <input type="text" placeholder="请输入搜索内容" v-model="searchVal" />
          <button @click="searchData">搜索</button>
        </div>
      </div>
      <div v-if="showTip" class="search-tip">
        <img
          src="https://www.vmovier.com/Public/Home/images/non-tip.png"
          alt=""
        />
        对不起，没有找到匹配结果。
      </div>
      <el-row :gutter="20">
        <el-col v-for="item in filterArr" :key="item.id" :span="6">
          <div class="grid-content bg-purple">
            <search-list :searchInfo="item"></search-list>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="bot">
      <gm-footer></gm-footer>
    </div>
  </div>
</template>

<script>
import gmNav from "../components/gmNav.vue";
import searchList from "@/components/gmSearchList.vue";
import gmFooter from "@/components/gmFooter.vue";

export default {
  name: "Search",
  components: {
    searchList,
    gmNav,
    gmFooter,
  },
  data() {
    return {
      searchVal: "",
      filterArr: [],
      showTip: true,
    };
  },
  methods: {
    searchData() {
      if (this.filterArr.length != 0) {
        this.filterArr = [];
      }
      let inpValue = this.searchVal;
      if (inpValue == "") {
        this.$alert("请输入关键词！", {
          confirmButtonText: "确定",
          type: "warning",
        });
        return false;
      }
      let url = `https://apis.netstart.cn/vmovier/search?kw=${this.searchVal}&p=2`;
      let gms = axios.get(url);
      gms.then((res) => {
        if(res.data.msg == "ok"){
          this.filterArr = res.data.data.result.list;
          this.showTip = false;
        }
        if (res.data.msg == "没有内容了") {
          this.$alert("搜索不到您想看的内容！", {
            confirmButtonText: "确定",
            type: "warning",
          });
        }
      });
    },
  },
  watch: {
    searchVal(newVal, oldVal) {
      if (newVal == "") {
        this.filterArr = [];
        this.showTip = true;
      }
    },
  },
  beforeRouteEnter(to, from, next) {
    if (localStorage.userToken == null) {
      next({ path: "/login" });
    } else {
      next();
    }
  },
};
</script>

<style lang="scss" scoped>
.main-container {
  width: 1180px;
  margin: 0 auto;
  .search-box {
    .search {
      width: 532px;
      margin: 0 auto;
      display: flex;
      padding: 20px 0 40px;
      input {
        flex-grow: 1;
        border: 2px solid #3498db;
        border-right: none;
        padding: 10px 10px;
        outline: none;
      }
      button {
        color: #fff;
        background-color: #3498db;
        border: none;
        padding: 0 30px;
        display: inline-block;
        cursor: pointer;
      }
    }
  }
  .search-tip {
    text-align: center;
    font-size: 18px;
    color: #666;
    padding: 100px 0 0;
    height: 598px;
    img {
      margin-right: 20px;
      vertical-align: middle;
    }
  }
}
// .bot {
//   width: 100%;
//   position: absolute;
//   left: 0;
//   bottom: 0;
// }
</style>